<template>
  <div class='container'>
    <el-row :gutter="20" class="oneTimu">
      <el-col :span="6">【题型】:
        <span v-if="DetailList.questionType == 1">单选</span>
        <span v-if="DetailList.questionType == 2">多选</span>
        <span v-if="DetailList.questionType == 3">简答</span>
      </el-col>
      <el-col :span="6">【编号】:{{DetailList.id}}</el-col>
      <el-col :span="6">【难度】:
        <span v-if="DetailList.difficulty == 1">简单</span>
        <span v-if="DetailList.difficulty == 2">一般</span>
        <span v-if="DetailList.difficulty == 3">困难</span>
      </el-col>
      <el-col :span="6">【标签】:{{DetailList.tags}}</el-col>
      <el-col :span="6">【学科】:{{DetailList.subjectName}}</el-col>
      <el-col :span="6">【目录】:{{DetailList.directoryName}}</el-col>
      <el-col :span="6">【方向】:{{DetailList.direction}}</el-col>
    </el-row>
    <hr>
      <span>【题干】:
        <p  v-html="DetailList.question" class="colorTigan"></p>
        <div v-if="DetailList.questionType == 1">
              <div class="danxuan" v-for="(item, i) in DetailList.options" :key="i">
                <input type="radio" :checked='item.isRight == 1' :disabled='item.isRight != 1' >
                <span class="fenkai">{{item.title}}</span>
              </div>
        </div>
        <div v-if="DetailList.questionType == 2">
              <div class="danxuan" v-for="(item, i) in DetailList.options" :key="i">
                <input type="checkbox" :checked='item.isRight == 1' disabled >
                <span class="fenkai">{{item.title}}</span>
              </div>
        </div>
      </span>
    <hr>
    <span>【参考答案】:<el-button type="danger" @click="showVideo = true" size="small">视频答案预览</el-button>
      <div class="answerVideo" v-if="showVideo">
       <video width="400" height="300" controls>
         <source :src="DetailList.videoURL" type="video/mp4">
       </video>
     </div>
    </span>
    <hr>
    <span>【答案解析】:<p v-html="DetailList.answer"></p></span>
    <hr>
    <span>【题目备注】:{{DetailList.remarks}}</span>
  </div>
</template>

<script>
import { detail } from '@/api/hmmm/questions.js'
export default {
  watch:{},
  props: {
    receive: {
      required: true
    }
  },
 data () {
   return {
    DetailList: [],
    RandomslistId: {},
    showVideo: false,
   }
 },
 created () {
   this.getDetail()
 },
 methods: {
  async getDetail () {
    const { data } = await detail(this.receive)
    this.DetailList = data
    console.log(this.DetailList)
   }
 }
}
</script>
<style scoped lang='less'>
.oneTimu{
  .el-col{
    margin: 10px 0;
  }
}
.el-button{
  width: 104px;
  height: 32px;
  font-size: 12px;
}
.colorTigan{
  color: blue;
}
.fenkai{
  margin-left: 10px;
}
</style>
